<template>
  <div class="container">
    <!-- <header>时段预约</header> -->
    <section class="header-section">
      <el-form :inline="true" class="m-t-1 apply-card ">
        <el-form-item label="医院" label-width="90px">
          <el-select size="small" v-model="listQuery.hospitalCode" @change="changeHosp" placeholder="请选择医院" filterable clearable>
            <el-option
              v-for="item in mx_hospitalList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="影像区域" label-width="90px" prop="depArea">
          <el-select style="width:100%" size="small" v-model="depArea" @change="changeDepArea" placeholder="请选择" multiple clearable>
            <el-option
              v-for="item in depAreaOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查部门" label-width="90px" prop="dep">
          <el-select style="width:100%" size="small" v-model="dep" @change="changeDep" placeholder="请选择" multiple clearable>
            <el-option
              v-for="item in depOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科室" label-width="90px" prop="dep">
          <el-select size="small" v-model="department" placeholder="请选择" clearable multiple>
            <el-option
              v-for="item in departmentOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查设备" label-width="90px" prop="modality">
          <el-select style="width:100%" size="small" v-model="modality" placeholder="请选择" multiple clearable>
            <el-option
              v-for="item in modalityOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查机房" label-width="90px" prop="checkRoom">
          <el-select style="width:100%" size="small" v-model="checkRoom" placeholder="请选择" multiple clearable>
            <el-option
              v-for="item in checkRoomOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="检查班次" label-width="90px" prop="checkClass">
          <el-select style="width:100%" size="small" v-model="checkClass" placeholder="请选择" multiple clearable>
            <el-option
              v-for="item in checkClassOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否可预约" label-width="90px">
          <el-select size="small" v-model="listQuery.isCanAppointment" placeholder="请选择是否可预约" clearable>
            <el-option
              v-for="item in options.canAppointmentOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约状态" label-width="90px">
          <el-select size="small" v-model="listQuery.appointmentStatus" placeholder="请选择预约状态" clearable>
            <el-option
              v-for="item in options.appointmentStatusOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预约日期" label-width="90px">
          <el-date-picker
            size="small"
            v-model="listQuery.appointmentDate"
            type="date"
            placeholder="选择预约日期"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="开始时间" label-width="90px">
          <el-time-select
            size="small"
            placeholder="选择检查开始时间"
            v-model="listQuery.beginTime"
            :picker-options="{
              start: '00:00',
              step: '00:15',
              end: '18:30'
            }"
          >
          </el-time-select>
        </el-form-item>
        <el-form-item label="结束时间" label-width="90px">
          <el-time-select
            size="small"
            placeholder="选择检查结束时间"
            v-model="listQuery.endTime"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '24:00',
              minTime: listQuery.beginTime
            }">
          </el-time-select>
        </el-form-item>
        <el-form-item label="时令" label-width="90px">
          <el-select size="small" v-model="listQuery.season" placeholder="请选择时令" clearable>
            <el-option
              v-for="item in options.seasonOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="m-l-0" size="small" @click="search" plain><i class="el-icon-search"></i>搜索</el-button>
          <el-button type="primary" class="m-l-0" size="small" @click="selectAppTime"><i class="el-icon-circle-plus"></i>设置预约申请单</el-button>
        </el-form-item>
      </el-form>
      <select-app-dialog @myClose="handleCloseApp" :dialog-app-visible="dialogAppVisible"></select-app-dialog>
    </section>
    <section class="content-section">
      <el-row :gutter="20">
        <el-col :span="curStatus ? 12 : 24" class="col-left">
          <el-table v-loading="loading" size="medium" :data="timeAppTable" @row-click="rowClick">
            <el-table-column prop="hospitalCode" label="医院名称" :formatter="frtHospCode" align="center"> </el-table-column>
            <el-table-column prop="depArea" label="影像区域" align="center"> </el-table-column>
            <el-table-column prop="dep" label="检查部门" align="center"> </el-table-column>
            <el-table-column prop="department" label="科室" align="center"> </el-table-column>
            <el-table-column prop="modality" label="检查设备" align="center"> </el-table-column>
            <el-table-column prop="checkRoom" label="检查机房" align="center"> </el-table-column>
            <el-table-column prop="appointmentDate" label="检查日期" align="center" :formatter="frtTime"> </el-table-column>
            <el-table-column prop="beginTime" label="检查开始时间" align="center" :formatter="frtTime"> </el-table-column>
            <el-table-column prop="endTime" label="检查结束时间" align="center" :formatter="frtTime"> </el-table-column>
            <el-table-column prop="appointmentStatus" label="预约状态" align="center" :formatter="frtTime"> </el-table-column>
          </el-table>
          <paginationCont
            :total="totalCount"
            :page.sync="currentPage"
            :limit.sync="pageSize"
            @pagination="fetchData"
          />
        </el-col>
        <transition name="fade-form" mode="out-in">
          <el-col :span="12" v-show="curStatus" class="col-right">
            <div>
              <el-table size="medium" :data="detailTable">
                <el-table-column prop="parametersValues" label="参数值" align="center"> </el-table-column>
                <el-table-column prop="parametersType" label="参数类型" align="center"> </el-table-column>
                <el-table-column prop="appointmentDate" label="检查日期" align="center"> </el-table-column>
                <el-table-column prop="remark1" label="备注" align="center"> </el-table-column>
              </el-table>
              <el-button class="floatR m-l-1 m-t-1" size="small" @click="handleCancel">返回</el-button>
            </div>
          </el-col>
        </transition>
      </el-row>
    </section>
  </div>
</template>
<script>
import { getAppPages, getAppFiltersLists, getDepAreaList, getCheckRoomList, getModalityList, getDepList, getItemGroupList, getItemList } from '@/api/api.js'
import { Options } from '@/utils/constant'
import paginationCont from '@/components/Pagination/index'
import selectAppDialog from './selectAppDialog'
import { dateFormatter } from '@/utils/validate'

export default {
  name: 'TimeSet',
  components: {
    paginationCont,
    selectAppDialog
  },
  data() {
    return {
      options: Options,
      depArea: [],
      dep: [],
      modality: [],
      department: [],
      checkRoom: [],
      checkClass: [],
      listQuery: {
        hospitalCode: '',
        appointmentDate: '',
        isCanAppointment: -1,
        depArea: '',
        dep: '',
        department: '',
        modality: '',
        checkRoom: '',
        checkClass: '',
        appointmentStatus: '',
        season: -1,
        beginTime: '',
        endTime: ''
      },
      departmentOptions: [],
      depAreaOptions: [], // 影像区域
      depOptions: [], // 检查部门
      modalityOptions: [], // 检查设备
      checkRoomOptions: [], // 检查机房
      checkClassOptions: [], // 检查班次
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      timeAppTable: [],
      detailTable: [],
      curStatus: false,
      dialogAppVisible: false, // 选择时间对话框
      loading: false,
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      }
    }
  },
  created() {
    this.$getHospitalList()
    this.init()
  },
  methods: {
    init() {
      this.listQuery.appointmentDate = new Date()
      this.listQuery.hospitalCode = this.mx_hospitalList[0].code || ''
      getItemGroupList({ hospitalCode: this.listQuery.hospitalCode, type: '班次' }).then((res) => {
        if (res && res.code === 10000) {
          this.checkClassOptions = res.content.list
        }
      })
      this.changeHosp()
      this.fetchData()
    },
    changeHosp() {
      if (!this.listQuery.hospitalCode) return
      // 关联：影像、检查部门、检查分组、检查设备、检查机房
      let data = { HospitalCode: this.listQuery.hospitalCode }
      getDepAreaList(data).then(res => {
        if (res && res.code === 10000) {
          this.depAreaOptions = res.content.list
        }
      })
      // 检查部门
      this.getDep()
      // 检查分组、检查设备、检查机房
      this.getCheckList()
    },
    changeDepArea() {
      if (this.depArea.length === 0) return
      // 关联：检查部门/科室
      this.getDep()
      this.getDepartment()
    },
    getDepartment() {
      let data = {
        HospitalCode: this.listQuery.hospitalCode,
        DepArea: this.depArea.join(','),
        type: '科室'
      }
      getItemList(data).then(res => {
        if (res && res.code === 10000) {
          this.departmentOptions = res.content.list.map(_item => _item.item)
        }
      })
    },
    getDep() {
      let data = {
        HospitalCode: this.listQuery.hospitalCode,
        DepArea: this.depArea.join(',')
      }
      getDepList(data).then(async res => {
        if (res && res.code === 10000) {
          this.depOptions = res.content.list
        }
      })
    },
    changeDep() {
      if (this.dep.length === 0) return
      // 关联：、检查设备、检查机房
      this.getCheckList()
    },
    getCheckList() {
      let data = {
        HospitalCode: this.listQuery.hospitalCode,
        Dep: this.dep.join(',')
      }
      getModalityList(data).then(res => {
        if (res && res.code === 10000) {
          this.modalityOptions = res.content.list
        }
      })
      getCheckRoomList(data).then(res => {
        if (res && res.code === 10000) {
          this.checkRoomOptions = res.content.list
        }
      })
    },
    search() {
      this.currentPage = 1
      this.fetchData()
    },
    fetchData() {
      if (!this.listQuery.hospitalCode || !this.listQuery.appointmentDate) {
        this.$message.warning('请选择医院与时间')
        return
      }
      this.loading = true
      // let data = {
      //   appointmentDate: dateFormatter(this.listQuery.appointmentDate, false),
      //   pageSize: this.pageSize,
      //   pageNumber: this.currentPage,
      //   hospitalCode: this.listQuery.hospitalCode,
      //   isCanAppointment: this.listQuery.isCanAppointment,
      // }
      this.listQuery.depArea = this.depArea.join(',')
      this.listQuery.department = this.department.join(',')
      this.listQuery.dep = this.dep.join(',')
      this.listQuery.modality = this.modality.join(',')
      this.listQuery.checkRoom = this.checkRoom.join(',')
      this.listQuery.checkClass = this.checkClass.join(',')
      this.listQuery.appointmentDate = dateFormatter(this.listQuery.appointmentDate, false)
      this.listQuery.pageSize = this.pageSize
      this.listQuery.pageNumber = this.currentPage

      getAppPages(this.listQuery).then(async res => {
        this.loading = false
        if (res && res.code === 10000) {
          this.timeAppTable = res.content.list
          this.totalCount = res.content.totalCount
        }
      }).catch(() => {
        this.loading = false
      })
    },
    rowClick(row, column, event) {
      this.curStatus = true
      getAppFiltersLists({ AppointmentListDmbId: row.id }).then(async res => {
        if (res && res.code === 10000) {
          this.detailTable = res.content.list
        }
      })
    },
    selectAppTime() {
      this.dialogAppVisible = true
    },
    handleCloseApp() {
      this.dialogAppVisible = false
    },
    handleCancel() {
      this.curStatus = false
    },
    // 格式化医院code
    frtHospCode(row, column, cellValue, index) {
      let name = ''
      let hospIndex = this.mx_hospitalList.findIndex(item => item.code === cellValue)
      if (hospIndex !== -1) {
        name = this.mx_hospitalList[hospIndex].name
      }
      return name
    },
    frtTime(row, column, cellValue, index) {
      let time = ''
      if (cellValue) {
        time = cellValue.slice(0, 10)
      }
      return time
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
